포함된 <img> 요소에 여러 소스를 제공하여 작성자가 화면 픽셀 밀도, 뷰포트의 크기, 이미지 형식 및 기타를 기반으로 사용할 이미지 리소스에 대해 유저 에이전트에 선언적으로 제어하거나 힌트를 제공할 수 있도록 하는 컨테이너(container)이다.
임베디드 콘텐츠(embedded-content)가 예상되는 위치
0개 이상의 <source> 요소, 하나의 <img> 요소, 선택적인 스크립트 지원 요소(script supporting)<img> 요소는 <source> 요소에서 지정된 리소스를 사용할 수 없을 때 사용되는 대체를 제공한다.
[Exposed=Window]
interface HTMLPictureElement : HTMLElement {
[HTMLConstructor] constructor();
};<picture> <source ></source> <img /> </pricure>
결과창(뷰포트)의 크기를 가로 방향으로 변화를 주면 설정된 값에 따라 이미지가 변경된다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.